<template>
	<div style="width: 100px; height: 100px" v-if="!modelValue">
		<div class="el-image__noset">
			未设置
		</div>
	</div>
	<div v-else>
		<el-image style="width: 100px; height: 100px" v-if="baseUrl.length > 0" :src="showUrl" :preview-src-list="[showUrl]" />
	</div>
</template>

<script>
export default {
	name: "gdshop-cover",
	props: {
		modelValue: String,
		baseUrl: String
	},
	computed: {
		showUrl() {
			if (this.isLegalHttpUrl(this.modelValue)) {
				return this.modelValue;
			} else {
				return this.baseUrl + this.modelValue;
			}
		}
	},
	methods: {
		isLegalHttpUrl(v) {
			return /^(http|https):\/\/[\S]+$/.test(v) === true;
		}
	}
};
</script>

<style scoped>
.el-image__noset {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	background: #F5F7FA;
	color: #C0C4CC;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}
</style>
